<script setup lang="ts">
import draggable from 'vuedraggable'
import { componentList } from './index'
import { MeunItem } from './interfaceType'

const props = defineProps({
    dragList: { type: Array as () => MeunItem[], required: false },
    label: { type: String, required: true, default: '' },

})

let boxKey = ref<number>(new Date().getTime());

</script>

<template>
    <!-- //需要克隆的数据，A组 -->
    <draggable :list="dragList" :force-fallback="true" :group="{ name: 'people', pull: true, put: true }" :sort="true"
        itemKey="id" class="items" animation="300" style="height: 100%;" type="draggable" fallbackTolerance="10"
        :id="label">
        <template #item="{ element, index }">
            <div class="item move" :style="element.style">
                <!-- <component :type="element?.type || ''" :is="componentList[element?.type || 'box']" :config="element"
                    ref="elementRef" class="item2" :label="label" :index="index" :keys="boxKey+'_'+element.id" :ckeys="boxKey+'_'+element.id" :path="label+'['+index+']'">
                </component> -->
                <component :type="element?.type || ''" :is="componentList[element?.type || 'box']" :config="element"
                    ref="elementRef" class="item2" :label="label" :index="index" :keys="boxKey + '_' + element.id"
                    :ckeys="boxKey + '_' + element.id" :path="label + '[' + index + ']'" :name="element?.type || ''">
                </component>
            </div>
        </template>
    </draggable>
</template>

<style scoped>
.items {
    color: white;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 70px);
    gap: 23px;
    grid-auto-flow: dense;
    grid-auto-rows: 80px;
    width: inherit;
    .item {
        height: 100%;

        .item2 {
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            /* filter: drop-shadow(0px 0px 0px black); */
            backdrop-filter: blur(4px);
        }
        div[name="IconBox"]{
            filter: unset;
            backdrop-filter: unset;

            &:hover {
                filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
            }
        }
    }
}
</style>